<!--设置模块唯一ID-->
<div id="cyy_kucunbiao_add">
<!--标题、面包屑-->
<section class="content-header">
    <h1>
        添加入库
    </h1>
    <ol class="breadcrumb">
        <li><a href="#"><i class="fa fa-dashboard"></i> 首页</a></li>
        <li>产业园</li>
        <li>入库表</li>
        <li class="active">添加入库</li>
    </ol>
</section>
<!--列表-->
<section class="content">

</section>
<!--添加、修改弹出层-->
<script type="text/template" data-for="tp_editor">
    <form role="form" class="form-horizontal">
        <div class="u-box">
            <div class="u-box-header">
                <h3>操作人信息</h3>
            </div>
            <div class="u-area">
                <div class="form-group">
                    <label class="col-sm-2 control-label">操作人</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p3"
                               value="<%=data.p3?data.p3:''%>">
                    </div>

                    <label class="col-sm-2 control-label">当前时间</label>
                    <div class="col-sm-4">
                        <input type="text" class="form-control" name="p4" disabled
                               value="<%=data.p4?data.p4:''%>">
                    </div>
                </div>
            </div>
        </div>
        <div class="u-box">
            <div class="u-box-header">
                <h3>入库信息</h3>
            </div>
            <div class="u-area">
                <div class="form-group">
                    <div class="col-sm-2"></div>
                    <div class="col-sm-10">
                        <table class="table table-bordered table-striped table-hover u-inline-table">
                            <thead>
                                <th>名称</th>
                                <th>数量</th>
                                <th>规格</th>
                                <th>单位</th>
                                <th>操作</th>
                            </thead>
                            <tbody>

                            </tbody>
                        </table>
                    </div>
                </div>

                <div class="border"></div>

                <div class="form-group">
                    <label class="col-sm-2 control-label">备注</label>
                    <div class="col-sm-10">
                        <textarea class="form-control" name="p4">
                            "<%=data.p4?data.p4:''%>"
                        </textarea>
                    </div>
                </div>
            </div>
        </div>

        <div class="box-footer">
            <button type="submit" class="btn btn-primary pull-right">添加</button>
        </div>
    </form>
</script>

<script>
    USEN(function () {
        //模块ID(全系统唯一)
        var tableId = "#cyy_kucunbiao";
        var id = "#cyy_kucunbiao_add";
        var that = this;

        //定义页面变量
        var $el = $(id);
        var $editor = $el.children('script[data-for=tp_editor]');

        $.ajax({
            url:"./simdata/common_add_action.json",
            success:function(data){
                $el.children(".content").html(function(){
                    return _.template($editor.html())({
                        data:data
                    })
                });

                var $table = $(id+' table.table tbody');
                var tr = '<tr>' +
                        '<td editor></td>' +
                        '<td editor></td>' +
                        '<td editor></td>' +
                        '<td editor></td>' +
                        '<td><a href="javascript:;" class="add"> <i class="fa fa-plus"></i></a><a href="javascript:;" class="reduce"> <i class="fa fa-minus"></i></a></td></tr>';

                $table.append(tr).on('click','td[editor]',function(){
                    if($(this).find('input').length!=0) return false;
                    var val = $(this).text();
                    $(this).html('<input type="text" value="' + val + '"/>');

                    $(this).siblings('td').each(function(){
                        $(this).html($(this).find("input").val())
                    });

                    //自动联想
                    var $input = $(this).find('input');
                    that.autocomplete({
                        $el:$(this).find('input'),
                        url:"./simdata/common_autocomplete_action.json",
                        param:{
                            anyKey:"anyValue"
                        },
                        before:function(){
                            //动态增加自动联想必须加此行
                            $input.trigger('focus');
                        },
                        formatItem:function(item){
                            //显示结果
                            return item["name"]+'('+item["id"]+')';
                        },
                        setValue:function(item){
                            //选中结果
                            return {'data-value':item["name"],'real-value':item["id"]};
                        },
                        choose:function(data){

                            //在tr上绑定要提交的数据
                            $input.closest('tr').data('cacheData',{
                                name : data['data-value'],
                                id : data['real-value']
                            });

                            //为其他单元格填值
                            $input.closest('tr').find('td[editor]').each(function(i,j){
                                if($(this).is(':odd')){
                                    $(this).html(data['data-value']);
                                }else{
                                    $(this).html(data['real-value']);
                                }
                            });

                        }
                    });
                }).on('blur','input',function(){
                    var _t = $(this);
                    setTimeout(function() {
                        _t.parent('td').html(_t.val());
                    },300)
                }).on('click','a.add',function(){
                    var $tr = $(tr);
                    $tr.data('cacheData',{});
                    $table.append($tr);
                }).on('click','a.reduce',function(){
                    if($table.find("tr").length > 1)
                        $(this).closest('tr').remove();
                }).find('tr:first').data('cacheData',{});

                var tableData = [];
                //提交表单
                $el.find("form").ajaxForm({
                    url: './simdata/common_add_action.json',
                    type:'post',
                    beforeSubmit:function(){
                        //校验table数据
                        tableData = [];
                        var done = true;
                        $table.find('tr').each(function(idx,line){
                            var cache = $(this).data('cacheData');
                            if(cache){
                                tableData.push(cache);
                            }
                            $.each(cache,function(k,v){
                                if(k == 'id' && v != "1"){
                                    USEN.notifyAlert({
                                        type:"error",
                                        content:k + "列必须是1"
                                    });
                                    done = false;
                                    return done;
                                }
                            });
                        });
                        if(!done) return false;
                    },
                    data:{
                        //收集table数据,传给服务器
                        tableData : JSON.stringify(tableData)
                    },
                    success: function (data, state, obj) {
                        USEN.notifyAlert({
                            title: "提示:",
                            content: '操作成功,刷新列表'
                        });
                        USEN.getDatatable(tableId + ' table.table').ajax.reload();
                        USEN.closeActiveTab();
                    }
                });

            }
        })

    });
</script>
</div>